<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-row :gutter="20" class="mgb20">
					<el-col :span="4">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-1">
								<i class="el-icon-lx-people grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{totalSummary.notremoecount}}</div>
									<div>未销假总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="4">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-2">
								<i class="el-icon-lx-notice grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{totalSummary.notcomecount}}</div>
									<div>未回校总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="4">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-3">
								<i class="el-icon-lx-goods grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{totalSummary.excount}}</div>
									<div>入校异常总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="4">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-3">
								<i class="el-icon-lx-goods grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{totalSummary.excount}}</div>
									<div>入校异常总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-row :gutter="20" class="mgb20">
					<el-col :span="4">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-4">
								<i class="el-icon-lx-goods grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{totalSummary.dcount}}</div>
									<div>今日申请总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="4">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-5">
								<i class="el-icon-lx-goods grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{totalSummary.wcount}}</div>
									<div>本周申请总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="4">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-6">
								<i class="el-icon-lx-goods grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{totalSummary.mcount}}</div>
									<div>本月请假总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="4">
						<el-card shadow="hover" :body-style="{padding: '0px'}">
							<div class="grid-content grid-con-6">
								<i class="el-icon-lx-goods grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">{{totalSummary.mcount}}</div>
									<div>本月请假总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<schart ref="bar" class="schart" canvasId="bar" :options="options2">
					</schart>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import Schart from 'vue-schart';
	import bus from '../common/bus';
	import moment from 'moment';
	export default {
		name: 'dashboard',
		data() {
			return {
				code: 'H1cfKPHg2t',
				deptid: '',
				starttime: moment().subtract(6, 'd').format("YYYY-MM-DD"),
				endtime: moment().format("YYYY-MM-DD"),
				totalSummary: {

				},
				options: {
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar'
					}]
				},
				options2: {
					type: 'pie',
					title: {
						text: '最近一个月请假人数统计'
					},
					labels: ['病假', '事假', '其他'],
					datasets: [{
						label: '病假',
						data: [234, 278, 270]
					}, ]
				},
				places: '南开区、西青区、和平区', //关注地点
			};
		},
		components: {
			Schart
		},
		created() {
			//			localStorage.removeItem("my_token");
			//			localStorage.removeItem("my_user");
			//			this.code = this.getQueryVariable('code');
			//			let my_token = sessionStorage.getItem("my_token");
			let my_token = localStorage.getItem("my_token");

			let my_user = localStorage.getItem("my_user");
			//			console.log('my_token', my_token)
			//			console.log('my_user', my_user)

			if(my_user) {
				my_user = JSON.parse(my_user);
			}

			if(!my_token) {
				this.Login();
			} else {
				this.fetchData();
			}
		},
		mounted() {
			//			this.renderChart();
		},
		methods: {
			ChangeDept(sno, deptid) {
				let that = this;
				that.postAxios("/Login/ChangeDept?sno=" + sno + '&deptid=' + deptid, null).then((res) => {
					if(res.code == 0) {
						let token = res.data.token;
						let user = res.data.user;
						user = JSON.stringify(user);

						localStorage.setItem("my_token", token);
						localStorage.setItem("my_user", user);
					} else {
						that.$notify.error({
							title: '错误',
							message: '登录失败'
						});
					}
				})
			},
			//code 换取用户的sno和
			Login() {
				let that = this;
				that.postAxios("/Login/Login?code=" + this.code, null).then((res) => {
					if(res.code == 0) {
						let token = res.data.token;
						let user = res.data.user;
						user = JSON.stringify(user);

						localStorage.setItem("my_token", token);
						localStorage.setItem("my_user", user);
						//刷新页面，header组件重新获取用户信息
						//that.$router.go(0);
					} else {
						that.$notify.error({
							title: '错误',
							message: '登录失败'
						});
						//						that.$router.push({
						//							name: 'Login'
						//						})
						//						that.yindaoRouter();
					}
				})
			},
			yindaoRouter() {
				let eUrl = encodeURI('http://115.26.89.144');
				window.location.href = 'http://authserver.tmu.edu.cn/authserver/oauth2.0/authorize?response_type=code&client_id=EoCOWF80&redirect_uri=' + eUrl + '&state=1'
			},
			fetchData() {
				let that = this;
				that.postAxios("/Statistics/Place?starttime=" + this.starttime + '&endtime=' + this.endtime, null).then((res) => {
					if(res.code == 0) {}
				})
				that.postAxios("/Statistics/TotalSummary?starttime=" + this.starttime + '&endtime=' + this.endtime, null).then((res) => {
					if(res.code == 0) {
						that.totalSummary = res.data;
					}
				})
				that.postAxios("/Statistics/Category?starttime=" + this.starttime + '&endtime=' + this.endtime, null).then((res) => {
					//					if(res.code == 0) {
					//						that.options.data = res.data.data;
					//						that.options.labels = res.data.daterange;
					//						that.renderChart();
					//					}
				})
				//当天请假人数（一卡通部门）统计 （人）条形图
				that.postAxios("/Statistics/LeaveByDept?starttime=" + this.starttime + '&endtime=' + this.endtime, null).then((res) => {
					if(res.code == 0) {}
				})
				that.postAxios("/Statistics/PlacesFollows?starttime=" + this.starttime + '&endtime=' + this.endtime + '&places=' + this.places, null).then((res) => {
					if(res.code == 0) {}
				})
			},
			changeDate() {
				const now = new Date().getTime();
				this.data.forEach((item, index) => {
					const date = new Date(now - (6 - index) * 86400000);
					item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
				});
			},
			// handleListener() {
			//     bus.$on('collapse', this.handleBus);
			//     // 调用renderChart方法对图表进行重新渲染
			//     window.addEventListener('resize', this.renderChart);
			// },
			// handleBus(msg) {
			//     setTimeout(() => {
			//         this.renderChart();
			//     }, 200);
			// },
			renderChart() {
				//				this.$refs.bar.renderChart();
				//								this.$refs.line.renderChart();
			},
			//获取url参数
			getQueryVariable(variable) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for(var i in vars) {
					var pair = vars[i].split("=");
					if(pair[0] == variable) {
						return pair[1];
					}
				}
				return(false);
			},
		}
	};
</script>

<style scoped>
	.el-row {
		margin-bottom: 20px;
	}
	
	.grid-content {
		display: flex;
		align-items: center;
		height: 100px;
	}
	
	.grid-cont-right {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #999;
	}
	
	.grid-num {
		font-size: 30px;
		font-weight: bold;
	}
	
	.grid-con-icon {
		font-size: 50px;
		width: 5px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}
	
	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}
	
	.grid-con-1 .grid-num {
		color: rgb(45, 140, 240);
	}
	
	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}
	
	.grid-con-2 .grid-num {
		color: rgb(100, 213, 114);
	}
	
	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}
	
	.grid-con-4 .grid-con-icon {
		background: #c0c4cc;
	}
	
	.grid-con-5 .grid-con-icon {
		background: #c6ccc0;
	}
	
	.grid-con-6 .grid-con-icon {
		background: #e6a23c;
	}
	
	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}
	
	.grid-con-4 .grid-num {
		color: #c0c4cc;
	}
	
	.grid-con-5 .grid-num {
		color: #c6ccc0;
	}
	
	.grid-con-6 .grid-num {
		color: #e6a23c;
	}
	
	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}
	
	.user-avator {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}
	
	.user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}
	
	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}
	
	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 25px;
	}
	
	.user-info-list span {
		margin-left: 70px;
	}
	
	.mgb20 {
		margin-bottom: 20px;
	}
	
	.todo-item {
		font-size: 14px;
	}
	
	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}
	
	.schart {
		width: 100%;
		height: 300px;
	}
</style>